{% load static %}
<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
	<title>树选择控件</title>
	
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=9,IE=10" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<script>var d = "";</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	
	
	<meta name="decorator" content="blank"/>
	<link href="{% static '/ani/static/plugin/jstree/style.css' %}" rel="stylesheet" type="text/css"/>
<script src="{% static '/ani/static/plugin/jstree/jstree.min.js' %}" type="text/javascript"></script>

	<script type="text/javascript">
		var tree;
		$(document).ready(function(){
			
			//jstree初始化
			$('#jstree').jstree({
				'core' : {
					"multiple" : true,
					"animation" : 0,
					"themes" : { "icons":true ,"stripes":false},
					'data' : {
						"url" : "/ani/a/sys/menu/treeData?&extId=&isAll=&module=&t="+ new Date().getTime(),
						"dataType" : "json" // needed only if you do not supply JSON headers
					}
				},
				'plugins' : ['types' ,"search",  'wholerow'],
				"types":{ 
					'default' : { 'icon' : 'fa fa-folder' },
			        '1' : {'icon' : 'fa fa-home'},
					'2' : {'icon' : 'fa fa-umbrella' },
				    '3' : { 'icon' : 'fa fa-group'},
					'4' : { 'icon' : 'fa fa-eur' },
					'btn':{'icon' : 'fa fa-square'}
				} 

			});
			
			 tree = $('#jstree').jstree(true);
			 
			 //查找功能
			  var to = false;
			  $('#search_q').keyup(function () {
			    if(to) { clearTimeout(to); }
			    to = setTimeout(function () {
			      var v = $('#search_q').val();
			      $('#jstree').jstree(true).search(v);
			    }, 250);
			  });
			  $("#searchButton").click(function(){
				  var v = $('#search_q').val();
			      $('#jstree').jstree(true).search(v);
			  })
			
		});
		
	</script>

</head>
<body>
	
		 
		<!-- 搜索 -->
			 <div class="input-search" style="margin: 5px 20px 0px 20px">
				 <button type="submit" class="input-search-btn">
					 <i class="fa fa-search" aria-hidden="true"></i></button>
				 <input   id="search_q" type="text" class="form-control input-sm" name="" placeholder="请输入关键词...">

			 </div>
		
			<div class="row">
					<div id="jstree" ></div>
			</div>

</body>
</html>